<!-- systemUserManage -->
<template>
  <box-layout>
    <template v-slot:header>
      <box-title title="查询条件"><i class="el-icon-arrow-down" /> </box-title>
      <my-form ref="searchRef" :model="formDatas" :items-datas="itemsDatas" :form-datas="formDatas" :rules="rules">
        <my-button @click="resetForm('searchRef')">重置</my-button>
        <my-button type="primary" @click="submitForm('searchRef')">提交</my-button>
      </my-form>
    </template>
    <box-title title="人员列表">
      <my-button
        type="success"
        icon="document"
        :disabled="!multipleSelection.length"
        :loading="exportLoading"
        @click="exportExcel"
      >
        {{ exportLoading ? '导出中': '导出选中项Excel' }}
      </my-button>
      <my-button @click="checkAll">全选</my-button>
      <my-button @click="addVisiable = true">弹窗</my-button>
      <my-button @click="drawerVisiable = true">橱窗</my-button>
    </box-title>
    <my-table
      ref="demoTableRef"
      :data="tableData"
      :table-columns="columns"
      :multiple-selection.sync="multipleSelection"
      has-pagination
      :hide-on-single-page="false"
      :page-num="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
      <template v-slot:status="{row}">{{ row.status == -1 ? '禁封' : row.status == 1 ? '正常' : '-' }}</template>
      <template v-slot:gend="{row: {gend}}">{{ gend == 1 ? '女' : gend == 2 ? '男' : '-' }}</template>
      <template v-slot:action="scope">
        <a @click="fn(scope)">delete</a>
      </template>
    </my-table>
    <my-dialog :visible.sync="addVisiable" title="新增">
      <my-form ref="addInfoRef" :model="addFormDatas" :items-datas="addItemsDatas" :form-datas="addFormDatas" :rules="addRules" />
      <box-title title="人员列表">
        <my-tooltip>
          <div slot="content">内容</div>
          <my-link icon="el-icon-edit">编辑</my-link>
        </my-tooltip>
      </box-title>
      <my-table :data="tableData" :table-columns="columns">
        <template v-slot:action="scope">
          <myButton type="danger" size="small" icon="delete" title="删除" @click="del(scope)" />
        </template>
      </my-table>
      <template slot="footer">
        <my-button @click="addVisiable = false">关闭</my-button>
        <my-button>重置</my-button>
        <my-button>保存</my-button>
        <my-button @click="addVisiable2 = true">icon展示</my-button>
      </template>
      <my-dialog :visible.sync="addVisiable2" width="80%" title="icon展示">
        <div style="text-align: center;">
          <my-icon v-for="(v, i) of iconList" :key="v + i" class="icon-block" :type="v" @click="copyIconFn(v)" />
          <my-icon v-for="(v,i) of svgIcons" :key="v+i" class="icon-block" :icon-name="v" @click="copySvgIconFn(v)" />
          <!-- <svg-icon icon-class="tels" /> -->
        </div>
        <my-rate />
        <!-- <my-tabs /> -->
      </my-dialog>
    </my-dialog>
    <my-drawer title="消息提示" direction="right" :visible.sync="drawerVisiable">
      <!-- <my-table :data="tableData" :table-columns="columns" /> -->
      <box-title title="message" />
      <my-button @click="$msgInfo()">info</my-button>
      <my-button type="success" @click="$msgSuccess('成功')">success</my-button>
      <my-button type="warning" @click="$msgWarn('警告')">warn</my-button>
      <my-button type="danger" @click="$msgError('错误')">error</my-button>
      <my-button type="info" @click="$msgHtml('<h2>H2</h2>')">HTML</my-button>
      <my-button type="default" @click="confirmBoxFn()">confirmBox</my-button>
      <br>
      <my-checkbox v-model="checkValue">aa</my-checkbox>
      <br>
      <my-select v-model="selectVal" style="width: 100%;" :options="selectOptions" allow-create clearable multiple filterable />
      <br>
      <MyPopover trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
        <my-button slot="reference">hover 激活</my-button>
      </MyPopover>
      <br>
      <MyPopconfirm onfirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？">
        <my-button slot="reference" type="primary">删除</my-button>
      </MyPopconfirm>
      <br>
      <my-cascader :value="cascaderValue" style="width: 100%;" :options="options" clearable prop-multiple @change="getCascaderValue" />
      <el-row>
        <my-tabs
          tab-position="left"
          type="border-card"
          :value="tabValue"
          :tabs="[
            {label: 'tab1', value: 'tab1'},
            {label: 'tab2', value: 'tab2'}
          ]"
          @change="tabChange"
        />
      </el-row>
      <template v-slot:footer>
        <!-- <button @click="drawerVisiable = false">关闭</button> -->
        <my-button @click="drawerVisiable2 = true">展开2</my-button>
      </template>
      <my-drawer title="人员列表2" :append-to-body="true" direction="right" :visible.sync="drawerVisiable2" />
    </my-drawer>
  </box-layout>
</template>
<script>
import dataMix from './dataMix'
import { table2Excel } from '@/vendor/Export2Excel'
export default {
  name: 'SystemUserManage',
  components: {},
  mixins: [dataMix],
  data() {
    return {
      drawerVisiable2: false,
      addVisiable2: false,

      checkValue: true,
      selectVal: '',
      selectOptions: [
        { label: 'aaa', value: 'aaa' },
        { label: 'bbb', value: 'bbb', disabled: true },
        { label: 'ccc', value: 'ccc' },
        { label: 'ddd', value: 'ddd' },
        { label: 'eee', value: 'eee' }]
    }
  },
  computed: {},
  watch: {
    '$route.query.data': {
      handler: function(val) {
        console.log(val, this.pageInfo)
        // alert('watch: ', val)
      }
      // immediate: true,
      // deep: true
    },
    cascaderValue(val) {
      console.log('cascaderValue: ', val)
    }
  },
  mounted() {
    this.addFormDatas = this.formDatas
    this.addItemsDatas = [...this.itemsDatas]

    console.log('svgIcons: ', this.svgIcons)
  },

  methods: {
    tabChange(val) {
      console.log(val)
    },
    getCascaderValue(vals) {
      console.log('cascaderVal: ', vals)
    },
    checkAll() {
      this.$refs.demoTableRef.toggleAllSelection()
    },
    async exportExcel() {
      this.exportLoading = true
      await table2Excel(this.columns, this.multipleSelection, 'export导出Demo')
      this.exportLoading = false
    },
    confirmBoxFn() {
      this.$msgConfirm().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    copyIconFn(val) {
      this.$myCopyClip(`<i class="el-icon-${val}"/>`)
      this.$notifySuccess(`<i class="el-icon-${val}"/>复制成功`)
    },
    copySvgIconFn(svgVal) {
      this.$myCopyClip(`<svg-icon icon-class="${svgVal}"/>`)
      this.$notifySuccess(`<svg-icon icon-class="${svgVal}"/>复制成功`)
    },
    del(scope) {
      alert(scope.row)
    },
    fn(scope) {
      console.log(scope)
    },
    handleSizeChange(page) {
      this.pageInfo.pageNum = 1
      this.pageInfo.pageSize = page.pageSize
      // this.page.pageSize = page.pageSize
    },
    handleCurrentChange(page) {
      this.pageInfo.pageNum = page.pageNum
    },
    resetForm(formRef) {
      this.$refs[formRef].resetFields()
    },
    submitForm(formRef) {
      this.$refs[formRef].validate(valid => {
        if (valid) alert('submit')
        else alert('submit error!')
      })
    },

    handleChange(val) {
      console.log(val)
    }
  }
}

</script>
<style lang='scss' scoped>
.icon-block {
  +i {
    padding: 2 * $const;
  }
  +svg {
    box-sizing: border-box;
    margin: 2 * $const;
    display: inline-block;
  }
  font-size: 32px;
  color: #606266;
  cursor: pointer;
  &:hover {
    color: $menuActiveText;
    background-color: #f0f0f0;
    transition: all 0.5s;
  }
  // border-right: 1px solid #88898c;
  // border-bottom: 1px solid #88898c;
}

</style>
